<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

const router = useRouter()

// 模拟环境检测
onMounted(() => {
  // 这里可以添加一些初始化逻辑
})
</script>

<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <Header />
    
    <!-- 主内容区 -->
    <main class="main-content">
      <div class="container">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </main>
    
    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<style>
/* 页面过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 应用容器样式 */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
</style>
